Image maps, once learned, can be very simple. But
for the beginner, they can be infuriating. It
took me 3 days to get my first image map to work.
Now it takes about 2 minutes. Anyway, first you
must decide whether you want client-side
or server-side image maps. What's the
difference? Client-Side
maps work on the browsers end. This works great,
but if the browser can't handle them (like
Netscape 1.0) than people can't use them. But, in
my opinion, they're better. You don't have to
worry about having cgi-bin access to control it.
Server-Side
works like the client-side map, but is actually a
program. When the map is clicked on, the program
on the servers end runs and brings up the
appropriate URL for the browser to load. It works
on almost every browser that I know of. But if
you do not have access to the cgi-bin directory,
it can be a pain.
Client-Side Image
Maps
An example of a client-side map would be the map
on the main page of this site. The code for the
map looks like this:
<map
name="MainMap"> <area
shape=rect coords="0,0,187,30"
href="tags/">
<area shape=rect
coords="1,31,187,56"
href="forms/">
<area shape=rect
coords="1,56,187,77"
href="tables/">
<area shape=rect
coords="1,77,187,100"
href="frames/">
<area shape=rect
coords="1,100,187,124"
href="cgi/">
<area shape=rect
coords="1,124,187,148"
href="javascript">
<area shape=rect
coords="1,148,187,170"
href="java/">
<area shape=rect
coords="1,170,187,197"
href="editors.html">
<area shape=rect
coords="1,198,187,239"
href="links.html">
</map>
<img src="picts/mainmap.gif"
width=187 height=239 border=0 alt=The HTML Tutor
main map - for HTML buffs everywhere"
usemap="#MainMap">
The <map></map>
defines that this is indeed a map, and namenames
the map for use in the browser. It's referenced
in the <img src>. This defines
that the map exists. Now for the tags within the
map.
area shape=rect - defines the shape of the
area that will be the link. This can br rect
(rectangle), circle and poly (polygon).
coords="1,2,3,4" - these define
the coordinates of the circle, polygon or
rectangle.
href="file.html" - this is a
hypertext link that this area of the map will
refer to. This can also be an image, or even a mailto:
tag. That's up to you.
Now, we end it all
up with the <img> tag. You;ll
notice it's the same as all other tags, but it
has usemap="#MainMap". Without
this, the map will not work. This is what tells
the browser that the picture being loaded should
be associated with the map and used accordingly.
Well, that's
great... but how do we figure out the
coordinates? Well, there are two ways. The easy
way is to download Map This!, an excellent
image map editor for Windows 95. This is an easy
way to make them. If you can't use that, than try
getting Paint Shop Pro. This program allows you
to see the coordinates of the picture. It's also
a pretty darn good graphics program. Just use the
eyedropper to define the coordinates.
Server-Side Image
Maps
Server-side image maps have the same basic layout
of client-side image maps, but they are in a
little different order. We'll use the coordinates
from the map above. But here's how they would
appear in a server-side map:
default http://206.156.15.206/html/
rect http://206.156.15.206/html/tags/ 0,0 187,30
rect http://206.156.15.206/html/forms/ 1,31 187,56
rect http://206.156.15.206/html/tables/ 1,56 187,77
rect http://206.156.15.206/html/frames/ 1,77 187,100
rect http://206.156.15.206/html/cgi/ 1,100 187,124
rect http://206.156.15.206/html/javascript 1,124 187,148
rect http://206.156.15.206/html/java/ 1,148 187,170
rect http://206.156.15.206/html/editors.html 1,170 187,197
rect http://206.156.15.206/html/links.html 1,198 187,239
This tells the
server that the selection will be a rectangle, it
should like to http://206.156.15.206/html/tags
with the following coordinates. The default
defines what the picture should link to if an
area is clicked that is not defined by the
coordinates. To activate it on most systems, you
would use <a
href="/cgi-bin/imagemap/cgi-bin/maps/html.map"><img
src="picts/map.gif" ISMAP></a>.
The ISMAP tells the server that this picture is
an image map, and the html.map defines it's
coordinates. The /cgi-bin/imagemap is the cgi
script on the server that will be used, and the
/cgi-bin/maps/html.map tells the imagemap script
where the file is that defines the coordinates.
I know this may
sound a little confusing. So if you want to have
server-side image maps, contact your local
webmaster and ask him to help you. And if all
else fails, ask me.
- For a more
detailed description of both styles of
maps, please feel free to visit some of
these excellent sites for tutorials:
-
Return Home
1997 Copyright
Kattmann Publishing
|
